<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/public.css">
    <title>计算器</title>
    <style>
        .tleheader{
            background: rgb(45,181,185);
            color:#fff;
        }
        .container{
            background:rgb(46,182,185);
            padding:2px 0 20px;
            position: relative;
        }
        .itembox{
            position: relative;
        }
        .item{
            z-index:-1;
            border-right:1px solid rgb(233,233,233);
            border-bottom:1px solid rgb(233,233,244);
            position: absolute;
        }
        .pic2{
            width:60%;
            display:block;
            margin:0 auto;
            padding-top:12%;
        }
        .text2{
            line-height: 20px;
            font-size: 14px;
            text-align: center;
        }
        .pic2:last-child{
            padding-top: 20%;
        }
        h1{
            color:#fff;
        }
        .tleheader{
            background: rgb(46,182,185);
            border:none;
        }
        .logo{
            width:35%;
            display: block;
            margin: 0 auto;
        }
        .fs14cg{
            font-size: 14px;
            color:rgb(240,240,240);
        }
        .itembox2{
            position: relative;
            width:20%;
        }
        .fb{
            padding:2px 0;
        }
        .itembox2{
            padding:2px 0;
        }
        .itembox2 .picb{
            width:40%;
            display:block;
            margin:0 auto;
            padding-top:6%;
        }
        .textb{
            font-size: 8px;
        }
        .cg{
            color:rgb(167,167,167);
        }
    </style>
</head>
<body>
<header class="tleheader">
    <p class="backbtn"><a style="margin:0; text-decoration: none">
        <img src="../icon/arrow/zjt.PNG" class="backpic" alt="">
        <span>返回</span></a>
    </p>
    <h1 class="tc">小空网服务费用查询</h1>
    <div class="clear"></div>
</header>
<div>
    <a>
        <div class="itembox fl">
            <div class="item">
                <img src="button1.PNG" class="pic2" alt="">
                <p class="text2">水量计算</p>
            </div>
        </div>
    </a>
    <a>
        <div class="itembox fl">
            <div class="item">
                <img src="button2.PNG" class="pic2" alt="">
                <p class="text2">单位换算</p>
            </div>
        </div>
    </a>
    <a>
        <div class="itembox fl">
            <div class="item">
                <img src="button3.PNG" class="pic2" alt="">
                <p class="text2">膨胀水箱</p>
            </div>
        </div>
    </a>
</div>
<script type="text/javascript" src="../js/back.js"></script>

<script>
    var sw = document.body.offsetWidth;
    var items = document.getElementsByClassName("itembox");
    var item = document.getElementsByClassName("item");
    for(var i = 0; i < items.length; i++){
        items[i].style.width = sw/3 + "px";
        items[i].style.height = sw/3 + "px";
        item[i].style.width = sw/3 + "px";
        item[i].style.height = sw/3 + "px";
        if((i+1)%4==0){
            item[i].style.borderRight = "none";
        }
    }
</script>
</body>
</html>